<template>
	<view class="head-box" :style="`background:${readTheme.tabbarBackground};color:${readTheme.defaultColor};`">
		<view class="left-box">
			<text class="title">{{ title }}</text>
			<text class="type">{{ type }}</text>
		</view>
		<view class="right-box" @click="getMore">
			<text class="change">更多</text>
			<u-icon name="arrow-right" size="12" :color="readTheme.defaultColor" />
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters({
				readTheme: 'readTheme'
			})
		},
		props: {
			title: {
				type: String
			},
			type: {
				type: String
			}
		},
		methods: {
			getMore() {
				this.$emit('getMore')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(6, 27, 65, 0.75);
		background-color: #fff;
		padding: 10px 14px;

		.left-box {
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			.title {
				position: relative;
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 4px;
				padding-left: 8px;

				&::before {
					position: absolute;
					top: 8rpx;
					left: 0;
					content: '';
					width: 3px;
					height: calc(100% - 6px);
					display: inline-block;
					background-color: #459bf3;
				}
			}

			.type {
				font-size: 12px;
				font-weight: 400;
			}
		}

		.right-box {
			display: flex;
			align-items: center;

			.change {
				font-size: 12px;
				font-weight: 700;
				margin-right: 4px;
				line-height: 22upx;
			}
		}
	}
</style>
